@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/store/cases.css')}}">

@section('content')
@include('home.store.storeHeader')

<div class="main" id="storeCases"  v-cloak>
    <div class="companyCase_details_main">
        <div v-for="(item,index) in storeCase" @click="window.location.href = '{{ route('home.store.casesDetails') }}?id='+storeId+'&caseId='+item.id">
            <img :src="item.thumb" alt="">
            <div class="companyCase_details_right">
                <span>@{{item.title}}</span>
                <span> 案列详情：@{{item.content}}
                </span>
            </div>
        </div>
    </div>
    <div class="elementPage" style="margin-top: 20px;">
        <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
        </el-pagination>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#storeCases',
            data: () => {
                return {
                    pageNumber: 1,
                    storeId: getQueryString('id'),
                    storeCase: [],
                    pageCount: 0,
                }
            },
            created() {
                this.getCase();
            },
            mounted() {},
            methods: {
                getCase() {
                    let storeDetailData = {
                        id: this.storeId,
                        page: this.pageNumber,
                    }
                    apiAjax("{{ route('home.store.casesApi')}}", 'get', storeDetailData, (res) => {
                        if (res.code == 0) {
                            this.storeCase = res.data.data;
                            this.pageCount = res.data.total;
                        } else {}
                    }, (erro) => {});
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getCase();
                }
            }
        })
    })
</script>
@endsection